| 【微信小程序】实现手写电子签名并保存为图片功能 | 您所在的位置：网站首页 › language speech 区别 › 【微信小程序】实现手写电子签名并保存为图片功能 |
【微信小程序】实现手写电子签名并保存为图片功能
|
需求概述： 微信小程序的一个功能，类似于画板，用于电子签名，要求有一键清空画板和保存功能。 实现思路： 微信开发文档中的Canvas组件 微信画布API中的 wx.createCanvasContext(string canvasId, Object this) wx.canvasToTempFilePath(Object object, Object this) CanvasContext.draw(boolean reserve, function callback) 开发文档中把上面的API的用法写的很详细了，这里不多赘述了，直接放代码： WXML文件 清空 保存 {url}}"> -->WXSS文件 .Container { border: black 2px solid; border-radius: 3px; height: 99vh; width: 98vw; margin: 0 auto; box-shadow: 0 0 3px 2px black; } .PaintRegion { height: 90%; border: black 1px solid; margin: 3px 3px; margin-bottom: 10px; } .BtnRegion { /* height: 8%; */ text-align: center; } .myCanvas { height: 99%; width: 99%; }JS文件 var config = require("../../utils/config.js"); Page({ /** * 页面的初始数据 */ data: { penColor: 'black', lineWidth: 3, Imgurl: "" }, /** * 触摸开始 */ touchStart: function(e) { //得到触摸点的坐标 this.startX = e.changedTouches[0].x; this.startY = e.changedTouches[0].y; this.context = wx.createCanvasContext("myCanvas", this); // 设置画笔颜色 this.context.setStrokeStyle(this.data.penColor); // 设置线条宽度 this.context.setLineWidth(this.data.lineWidth); this.context.setLineCap('round'); // 让线条圆润 this.context.beginPath(); }, /** * 手指触摸后移动 */ touchMove: function(e) { var startX1 = e.changedTouches[0].x; var startY1 = e.changedTouches[0].y; this.context.moveTo(this.startX, this.startY); this.context.lineTo(startX1, startY1); this.context.stroke(); this.startX = startX1; this.startY = startY1; //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个 wx.drawCanvas({ canvasId: 'myCanvas', reserve: true, actions: this.context.getActions() // 获取绘图动作数组 }) }, /** * 触摸结束 */ touchEnd: function(e) { this.touchMove(e); }, /** * 清除涂鸦信息 */ clearCanvas: function(e) { this.context = wx.createCanvasContext("myCanvas", this); this.context.draw(); //CanvasContext.draw(boolean reserve, function callback) //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。 //reserve:本次绘制是否接着上一次绘制。false则会清空画布，true则保留 }, SaveImg: function() { var that = this; this.context = wx.createCanvasContext("myCanvas", this); this.context.draw(true, function() { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function(res) { that.setData({ //这里是为了预览功能做准备 Imgurl: res.tempFilePath }); //将图片保存到服务器 wx.uploadFile({ url: config.fileUrl + "UpLoadFile.php", //接口地址 filePath: res.tempFilePath, name: 'uploadfile_ant', header: { "Content-Type": "multipart/form-data" }, success: function(res) { console.log(JSON.parse(res.data).url); //打印出后台传回前端的图片的url地址 }, fail: function(res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function(res) {} }) } }); //若需要将图片下载到本地，则打开下面的注释 // wx.saveImageToPhotosAlbum({ // // 下载图片 // filePath: res.tempFilePath, // success: function() { // wx.showToast({ // title: '保存成功', // icon: 'success', // }) // }, // }) }, }) }); } })上传图片的后台PHP文件之前写过了，这里就不拿来混字数了。 |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |